<template>
  <div class="app-container w-full-60 ml-10">
    <search ref="searchRef" :roles="btnRoles" :search="handleSearch" :reset="handleReset" />
    <div class="app-table">
      <el-table v-loading="state.loading" :data="tableState.records" border
                header-cell-class-name="table-header"
                @selection-change="handleSelectChange" height="100%">
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column type="selection" width="40" />
        <el-table-column type="index" width="60" label="序号" align="center" />
        <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.dataIndex" :label="column.title"
                         :align="column.align" :width="column.width" :show-overflow-tooltip="column.ellipsis">
          <template #default="scope">
            <template v-if="column.key === 'operation'">
              <div class="permission-btn">
                <a v-for="(item, index) in rowBtnRoles" :key="index" v-permission="item.permission"
                   @click="item.onClick(scope.row)">
                  <el-tooltip placement="top">
                    <template #content>
                      <span>{{ item.title }}</span>
                    </template>
                    <svg-icon v-if="item.svg" :icon-class="item.icon"/>
                    <el-icon v-else size="16px">
                      <component :is="proxy.$icons[item.icon]" :style="{'color': item.color}"/>
                    </el-icon>
                  </el-tooltip>
                </a>
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        class="app-page"
        v-model:current-page="pageSearch.pageNumber"
        v-model:page-size="pageSearch.pageSize"
        :page-sizes="commonState.pageSizes"
        :layout="commonState.layout"
        :total="tableState.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!--新增/修改-->
    <detail :id="currentId" :drawer="formVisible" ref="formModuleRef" @refreshData="handleRefreshData"/>
  </div>

</template>
<script setup>
import Search from '@/views/system/dictItem/components/Search.vue';
import Detail from '@/views/system/dictItem/components/Detail.vue';
import {DictItemApi} from '@/api/system/dictItem';
import {columns, pageSearch, state, setLoading, tableState, setSearchParam, detailState} from './index';
import {commonState} from "@/common/index.js";
import useCurrentInstance from "@/hooks/useCurrentInstance";
import {confirm} from "@/utils/confirm.js";
import SvgIcon from "@/components/SvgIcon/index.vue";

const {proxy} = useCurrentInstance();

//弹窗
const formVisible = ref(false);
const currentId = ref('');
const formModuleRef = ref();

//查询
const searchRef = ref()
//功能按钮集合
const btnRoles = [
  {
    btnName: '新增',
    icon: 'CirclePlus',
    onClick: handleAdd,
    permission: DictItemApi.permission.save,
    type: 'success'
  },
  {
    btnName: '删除',
    icon: 'Delete',
    onClick: handleDelete,
    permission: DictItemApi.permission.delete,
    type: 'danger'
  }
];
//列功能按钮
const rowBtnRoles = [
  {
    icon: 'Edit',
    title: '修改',
    onClick: handleUpdate,
    permission: DictItemApi.permission.update,
    color: 'var(--el-color-primary)'
  },
  {
    icon: 'Delete',
    title: '删除',
    onClick: handleRowDelete,
    permission: DictItemApi.permission.delete,
    color: 'var(--el-color-danger)'
  }
]

//新增
function handleAdd() {
  if (!pageSearch.dictCode) {
    proxy.$message.warning('请先选择字典');
    return;
  }
  detailState.dictCode = pageSearch.dictCode
  formVisible.value = true;
  currentId.value = '';
}

//修改
function handleUpdate(row) {
  formVisible.value = true;
  currentId.value = row.id;
  nextTick(() => {
    formModuleRef.value.initInfo(row.id)
  })
}

//刷新页面
function handleRefreshData() {
  formVisible.value = false;
  pageSearch.pageNumber = 1;
  findPage();
}

//删除
function handleRowDelete(row) {
  confirm(proxy,"是否删除选中数据?", "warning").then((res) => {
    if (!res) return;
    DictItemApi.delete({ids: [row.id]}).then(res => {
      if (res.success) {
        proxy.$message.success(res.message);
        findPage();
      }
    });
  }).catch(() => {
  })

}

//删除
function handleDelete() {
  if (state.selectedRowKeys.length === 0) {
    proxy.$message.warning('请先选择数据');
    return;
  }
  let ids = [];
  state.selectedRowKeys.map(item => ids.push(item.id));
  confirm(proxy,"是否删除选中数据?", "warning").then((res) => {
    if (!res) return;
    DictItemApi.delete({ids: ids}).then(res => {
      if (res.success) {
        proxy.$message.success(res.message);
        findPage();
      }
    });
  }).catch(() => {
  })
}

//选中行
function handleSelectChange(selectedKeys) {
  state.selectedRowKeys = selectedKeys;
}

//切换分页
function handleSizeChange(pageSize) {
  pageSearch.pageSize = pageSize
  pageSearch.pageNumber = 1
  findPage()
}

//跳转指定页
function handleCurrentChange(pageNumber) {
  pageSearch.pageNumber = pageNumber
  findPage()
}

//分页查询
function findPage() {
  setLoading(true);
  DictItemApi.findPage(setSearchParam())
      .then(res => {
        if (res.success) {
          tableState.totalCount = Number(res.data.totalCount);
          tableState.records = res.data.records;
        }
      }).catch((error) => {
    console.log(error);
  }).finally(() => {
    setLoading(false);
  });
}

//查询
function handleSearch() {
  findPage();
}

//重置查询条件
function handleReset() {
  searchRef.value.handleReset();
  findPage();
}

defineExpose({
  findPage
})
</script>

<style scoped lang="scss"></style>
